<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui" template="/mainTemplate.xhtml">

    <ui:define name="content">
        <h:form id="employeeForm">
            <p:growl id="messages" showDetail="true" sticky="true" />
            <p:toolbar id="toolbar" style="margin-top:20px; margin-bottom:5px">
                <p:toolbarGroup align="left">
                    <p:commandButton value="Добавить"
                                     action="#{employeesBean.addEmployee()}" style="font-size: 85% !important"/>
                    <p:commandButton value="Редактировать"
                                     action="#{employeesBean.editEmployee()}" style="font-size: 85% !important"/>
                    <p:commandButton value="Ввести затраты"
                                     action="#{employeesBean.addExpense()}" style="font-size: 85% !important"/>
                    <p:commandButton value="Списать зарплату"
                                     action="#{employeesBean.showDebit()}" style="font-size: 85% !important"/>
                </p:toolbarGroup>
            </p:toolbar>

            <p:dataTable id="employee_table" value="#{employeesBean.employeesList}" var="employee"
                         rowKey="#{employee.name}" selection="#{employeesBean.selectedEmployee}"
                         selectionMode="single">

                <p:column  headerText="ФИО" >
                    <h:inputHidden value="#{employee.id}"/>#{employee.name}
                </p:column>
                <p:column  headerText="Тип ставки">
                    #{employee.salaryType.name}
                </p:column>
                <p:column headerText="Должность">
                    #{employee.posts.name}
                </p:column>
                <p:column  headerText="Ставка">
                    #{employee.salary} руб.
                </p:column>
                <p:column  headerText="Задолженность по зарплате">
                    #{projectMainBean.getEmployeeDept(employee.name)} руб.
                </p:column>

            </p:dataTable>
        </h:form>

        <h:form id="employeeDialogAdd">
            <p:dialog id="addEmployeeDialog" widgetVar="addEmployeeDialog" header="Добавление сотрудника" modal="true"
                      resizable="true">
                <ui:include src="dialogs/addEmployee.xhtml"/>
            </p:dialog>
            <script type="text/javascript">
                function handleCreateEmployeeRequest(xhr, status, args) {
                    if(args.validationFailed || !args.saveEmployee) {
                        jQuery('#addEmployeeDialog').effect("shake", { times:3 }, 100);
                    } else {
                        addEmployeeDialog.hide();
                    }
                }
            </script>
        </h:form>
        <h:form id="employeeDialogEdit">
            <p:dialog id="editEmployeeDialog" widgetVar="editEmployeeDialog" header="Редактирование сотрудника" modal="true"
                      resizable="true"  >
                <ui:include src="dialogs/editEmployee.xhtml"/>
            </p:dialog>
            <script type="text/javascript">
                function handleEditEmployeeRequest(xhr, status, args) {
                    if(args.validationFailed || !args.saveEditEmployee) {
                        jQuery('#editEmployeeDialog').effect("shake", { times:3 }, 100);
                    } else {
                        editEmployeeDialog.hide();
                    }
                }
            </script>
        </h:form>
        <h:form id="employeeDialogExpense">
            <p:dialog id="addEmployeeDialogExpense" widgetVar="addEmployeeDialogExpense" header="Трудозатраты сотрудника"
                      modal="true" resizable="true">
                <ui:include src="dialogs/addEmployeeExpense.xhtml"/>
            </p:dialog>
            <script type="text/javascript">
                function handleAddEmployeeExpenseRequest(xhr, status, args) {
                    if(args.validationFailed || !args.saveEmployeeExpense) {
                        jQuery('#addEmployeeDialogExpense').effect("shake", { times:3 }, 100);
                    } else {
                        addEmployeeDialogExpense.hide();
                    }
                }
            </script>
        </h:form>
        <h:form id="debitEmployeeForm">
            <p:dialog id="debitEmployeeDialog" widgetVar="debitEmployeeDialog" header="Выплата зарплаты"
                      modal="true" resizable="true">
                <ui:include src="dialogs/debitEmployee.xhtml"/>
                <script type="text/javascript">
                    function handleDebitEmployeeRequest(xhr, status, args) {
                        if(args.validationFailed || !args.saveEmployeeDebit) {
                            jQuery('#debitEmployeeDialog').effect("shake", { times:3 }, 100);
                        } else {
                            debitEmployeeDialog.hide();
                        }
                    }
                </script>
            </p:dialog>
        </h:form>


    </ui:define>
</ui:composition>